import React,{Component} from 'react';
import Adaptive from '../../../component/adaptive/Adaptive';
import Swiper from 'swiper';
import classNames from 'classnames';
import Waypoint from 'react-waypoint';
import PropTypes from 'prop-types';
import 'swiper/dist/css/swiper.min.css';
import 'animate.css';
import './reason.less';
const prefix = 'reason';
class Reason extends Component{
    state = {
        name:""
    };
    handleWaypointEnter = () =>{
        this.setState({
            name:"fadeInUp"
        })
    };
    handleWaypointLeave = () =>{
        this.setState({
            name:"fadeInUp"
        })
    };
    slideStart = () =>{
        let noSwiping = this.props.noSwiping;
        var mySwiper = new Swiper ('.swiper-container', {
            slidesPerView :'auto',
            spaceBetween:22,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            allowSwipeToNext:!noSwiping,
            allowSwipeToPrev:!noSwiping
        });
        if(noSwiping){
            mySwiper.destroy(false);
        }
    }
    componentDidMount(){
        this.slideStart();
    };
    componentDidUpdate(){
        this.slideStart();
    };
    render(){
        let state = this.state;
        let {title,slideSource,noSwiping,slideStyle,background} = this.props;
        let buttonStyle = {
            display:noSwiping?'none':null
        };
        let backStyle = (function () {
            if(background.match(/#[A-Z,a-z,0-p]+/g)){
                return background;
            }else{
                return `url(${background}) no-repeat center`;
            }
        })();
        return(
            <div className={prefix} style={{background:backStyle}}>
                <div className={prefix+"-container"}>
                    <h1>{title}</h1>
                    <Adaptive desktop={<Waypoint
                        onEnter={this.handleWaypointEnter}
                        onLeave={this.handleWaypointLeave}
                    />} phone={false} size={1200}/>
                    <div className={prefix+"-slide-container"}>
                        <div className="swiper-container">
                            <div className="swiper-wrapper">
                                {slideSource.map((value,index)=>{
                                    return (
                                        <div className={classNames("swiper-slide",prefix+'-panel','animated',state.name)} key={index} style={Object.assign({animationDelay: `${index/10}s` },slideStyle)}>
                                            <h3>{value.index}</h3>
                                            <p className={prefix+"-title"}>{value.description}</p>
                                            <p className={prefix+'-content'}>{value.reason}</p>
                                        </div>
                                    )
                                })}
                            </div>
                        </div>
                        <div className={classNames("swiper-button-prev",prefix+'-button',prefix+'-prev')} style={buttonStyle}></div>
                        <div className={classNames("swiper-button-next",prefix+'-button',prefix+'-next')} style={buttonStyle}></div>
                    </div>
                </div>
            </div>
        )
    }
};
export default Reason;
Reason.propTypes = {
  title:PropTypes.string.isRequired,
  slideSource:PropTypes.array.isRequired,
  noSwiping:PropTypes.oneOf([true,false]).isRequired,
    slideStyle:PropTypes.object,
    background:PropTypes.any
};
Reason.defaultProps = {
    background:'#fff'
};